import logoImg from "../assets/Onepeace.png";
import defaultAvatar from "../assets/defaultAvatar.png";
import React, {useEffect, useState} from 'react';
import { useNavigate } from 'react-router-dom'
import { CaretDownOutlined } from '@ant-design/icons';
import { Dropdown, Menu, Space ,message} from 'antd';

function Header(props) {
    const navigate = useNavigate()
    const [avatar,setAvatar] = useState(defaultAvatar)
    const [username,setUsername] = useState("匿名游客")
    useEffect(()=>{
        let username1=localStorage.getItem('username')
        let avatar1=localStorage.getItem('avatar')
        if(username1){
            setUsername(username1)
        }
        if(avatar1){
            
        }
    },[])
    const logout = () => {
        message.success('退出成功，即将返回登录页')
        localStorage.clear();   // 清除localStorage中的数据
        setTimeout(() => navigate('/login'), 1500)
    }
    const changeinfo=()=>{
        navigate('/means')
    }
    const menu = (
        <Menu>
        <Menu.Item key="1" onClick={changeinfo}> 修改资料</Menu.Item>
        <Menu.Divider/>
        <Menu.Item key="2" onClick={logout}>退出登录</Menu.Item>
        </Menu>
    );
    return (
        <header><img src={logoImg} className="logo"/>
            <div className="right"> <Dropdown overlay={menu}>
                <a className='ant-dropdown-link' onClick={(e) => e.preventDefault()}>
                    <Space>
                        <img src={avatar} className="avatar" alt=""/>
                        <span>{username}</span>
                        <CaretDownOutlined />
                    </Space>
                </a>
            </Dropdown></div>
        </header>
    );
}

export default Header;